<template>
  <div class="organizationstructuring">
    <el-card class="organizationSetting" :shadow="shadowShow">
      <el-tabs v-model="activeName" class="tabs" @tab-click="tabsClickHadnle">
        <el-tab-pane :label="$t('institutionSetting.jigou1')" name="first">
          <template>
            <BasicInfo />
          </template>
        </el-tab-pane>
        <el-tab-pane :label="$t('institutionSetting.jigou2')" name="second">
          <template>
            <Customize />
          </template>
        </el-tab-pane>
        <el-tab-pane :label="$t('institutionSetting.jigou3')" name="third">
          <template>
            <Unique />
          </template>
        </el-tab-pane>
        <!-- <el-tab-pane :label="$t('institutionSetting.jigou4')" name="four">
          <template>
            <MemberPermissions />
          </template>
        </el-tab-pane> -->
        <!-- <el-tab-pane :label="$t('institutionSetting.jigou5')" name="five">
          <template>
            <CloudSpace />
          </template>
        </el-tab-pane> -->
      </el-tabs>
      <div class="more_box" v-show="user_owner === '1'">
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
            <span style="display: inline-block; margin-right: 10px">{{
              $t('institutionSetting.jigou83')
            }}</span
            ><i class="el-icon-more"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="1">{{ $t('institutionSetting.jigou84') }}</el-dropdown-item>
            <!-- <el-dropdown-item command="2">{{ $t('institutionSetting.jigou85') }}</el-dropdown-item> -->
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-card>

    <!-- 解散机构弹框 -->
    <el-dialog
      :close-on-click-modal="false"
      :title="$t('institutionSetting.jigou84')"
      :visible.sync="dialogVisible"
      width="25%"
      @closed="toCancel"
    >
      <dissolveOrganization ref="dissolveOrganization"></dissolveOrganization>
      <span slot="footer" class="dialog-footer">
        <el-button @click="toCancel">{{ $t('add.add31') }}</el-button>
        <el-button type="primary" :loading="submitLoading" @click="toSubmit">{{
          isEnd ? $t('institutionSetting.jigou102') : $t('add.add30')
        }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import BasicInfo from './basicinfo.vue'; // 基本信息
import Customize from './customize.vue'; // 定制设置
import MemberPermissions from './memberpermissions.vue'; // 成员权限设置
import Unique from './unique.vue'; // 唯一性验证
import CloudSpace from './cloudspace.vue'; // 云空间管理

import dissolveOrganization from './common/dissolveOrganization.vue'; // 解散机构
import Cookies from 'js-cookie';
export default {
  name: 'BLZMasterIndex',
  components: {
    BasicInfo,
    Customize,
    MemberPermissions,
    Unique,
    CloudSpace,
    dissolveOrganization,
  },
  data() {
    return {
      activeName: 'first',
      dialogVisible: false,
      isEnd: false,

      user_owner: '',
      submitLoading: false,
    };
  },
  created() {
    this.user_owner = window.localStorage.getItem('user_owner');
  },
  mounted() {},

  methods: {
    // tab 切换
    tabsClickHadnle() {},

    handleCommand(command) {
      console.log('command', command);
      if (command === '1') {
        // 出现解散机构弹框
        this.dialogVisible = true;
      }
    },
    toSubmit() {
      let dissolveOrganization = this.$refs.dissolveOrganization;
      let sendCode = dissolveOrganization.$refs.sendCode;

      let email_phone = sendCode.verificationForm.email_phone;
      let code = sendCode.verificationForm.code;
      if (dissolveOrganization.currStep === 1) {
        if (!dissolveOrganization.know) {
          return this.$message({
            message: this.$t('institutionSetting.jigou95'),
            type: 'warning',
          });
        }
        dissolveOrganization.currStep = 2;
      } else if (dissolveOrganization.currStep === 2) {
        if (sendCode.caminho === 'mobile') {
          let formData = new FormData();
          formData.append('phone', email_phone);
          formData.append('code', code);
          this.$http
            .post('/smsMessage/verify', formData)
            .then((res) => {
              if (res.data.code !== 0) {
                return this.$message.error(res.data.msg);
              } else {
                dissolveOrganization.currStep = 3;
                sendCode.clickCount = 0;
                sendCode.count_down = 60;
                clearInterval(sendCode.downTime);
              }
            })
            .catch((e) => {
              console.error(e);
            });
        } else if (sendCode.caminho === 'email') {
          this.$http
            .get(`/open/sms/verifyCode?phoneOrEmail=${email_phone}&code=${code}`)
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg);
              } else {
                dissolveOrganization.currStep = 3;
                this.isEnd = true;
              }
            });
        }
      } else if (dissolveOrganization.currStep === 3) {
        this.submitLoading = true;
        let user_jg_id = window.localStorage.getItem('user_jg_id');
        let improveStr = dissolveOrganization.checkList.join('❀');
        let deleteReason = improveStr + '❀' + dissolveOrganization.reasons;
        const formData = new FormData();
        formData.append('deptId', user_jg_id);
        formData.append('deleteReason', deleteReason);

        this.$http
          .post('dissolveOrganization/dissolveOrganization', formData)
          .then(() => {
            this.dialogVisible = false;

            this.$message.success(this.$t('members.chengyuan76'));
            this.toLogout();
            this.submitLoading = false;
          })
          .catch((e) => {
            console.error(e);
          });
      }
    },
    toCancel() {
      let dissolveOrganization = this.$refs.dissolveOrganization;
      dissolveOrganization.$refs.sendCode.verificationForm.code = '';
      dissolveOrganization.$refs.sendCode.isClickCode = false;
      dissolveOrganization.$refs.sendCode.clickCount = 0;
      clearInterval(dissolveOrganization.$refs.sendCode.downTime);
      dissolveOrganization.$refs.sendCode.downTime = null;
      dissolveOrganization.$refs.sendCode.count_down = 60;
      dissolveOrganization.know = false;
      dissolveOrganization.currStep = 1;
      dissolveOrganization.checkList = [];

      this.dialogVisible = false;
      this.isEnd = false;
    },

    toLogout() {
      this.$http
        .post('/open/logout')
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          window.localStorage.removeItem('user_headUrl');
          window.localStorage.removeItem('user_realName');
          window.localStorage.removeItem('user_superAdmin');
          window.localStorage.removeItem('user_organizedRoleId');
          window.localStorage.removeItem('user_organizedType');
          window.localStorage.removeItem('user_roleId');
          window.localStorage.removeItem('user_jg_id');
          window.localStorage.removeItem('user_owner');
          window.localStorage.removeItem('user_permissionsList');
          window.localStorage.removeItem('user_id');
          window.localStorage.removeItem('user_name');
          window.localStorage.removeItem('user_roleId');
          window.localStorage.removeItem('user_organizedType');
          window.localStorage.removeItem('user_adminRoleName');
          window.localStorage.removeItem('tg_expand');
          // window.localStorage.removeItem('lang');
          Cookies.set('token', '', -1);

          this.$router.push('/');
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.organizationstructuring,
.organizationSetting {
  height: 100%;
  position: relative;
}

.more_box {
  position: absolute;
  top: 30px;
  right: 2%;
  cursor: pointer;
}
</style>
